import Taro, { getCurrentInstance } from '@tarojs/taro';
import { useState, useEffect } from 'react';
import { View, Picker, Button, Text } from '@tarojs/components';
import { AtInput, AtForm, AtMessage, AtToast } from 'taro-ui';
import { getOrganizations, submitApplication } from '@/api/application/campustransfer';
import Header from '@/components/header';
import Return from '@/components/Return';
import SubmitOkModal from '@/components/SubmitOkModal';
import "taro-ui/dist/style/components/button.scss"; // 按需引入
import "taro-ui/dist/style/components/fab.scss";
import "taro-ui/dist/style/components/image-picker.scss";
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/toast.scss";
import "taro-ui/dist/style/components/input.scss";
import "taro-ui/dist/style/components/textarea.scss";
import css from './index.module.less';
import "./index.less";

export default function NewCampustransfer() {
  const router = getCurrentInstance().router.params;
  const { name, organizationId, organizationName, sex, studentJobNumber } = JSON.parse(router.userInfo);

  //表单数据
  const [birthday, setBirthday] = useState('2000-01-01');
  const [userNation, setUserNation] = useState("");
  const [targetOrg, setTargetOrg] = useState(0);
  const [changeReason, setChangeReason] = useState("");
  //提交成功弹窗的可见性
  const [submitOkVis, setSubmitOkVis] = useState(false);
  //表单选择器数据
  const [orgRange, setOrgRange] = useState([
    { organizationId: 0, organizationName: '请选择' }
  ]);
  //加载中
  const [isOpened, setIsOpened] = useState(false);

  useEffect(() => {
    getOrganizations().then(res => {
      if (res.code === 200) {
        setOrgRange([...orgRange, ...res.data]);
      }
    });
  }, []);

  const birthdayChange = (e) => {
    setBirthday(e.detail.value);
  };

  const tipMessage = (message) => {
    Taro.atMessage({
      'message': message,
      'type': 'warning',
      'duration': 2000
    });
  };

  const verifyForm = () => {
    if (userNation === '') {
      tipMessage();
      Taro.atMessage({
        'message': '请输入民族',
        'type': 'warning',
        'duration': 2000
      });
      return false;
    }
    else if (+targetOrg === 0) {
      Taro.atMessage({
        'message': '请选择移交党支部',
        'type': 'warning',
        'duration': 2000
      });
      return false;
    }
    else if (orgRange[targetOrg].organizationId === organizationId) {
      Taro.atMessage({
        'message': '移交党支部与原党支部相同',
        'type': 'warning',
        'duration': 2000
      });
      return false;
    }
    else if (changeReason === '') {
      Taro.atMessage({
        'message': '请输入转移原因',
        'type': 'warning',
        'duration': 2000
      });
      return false;
    }
    return true;
  };

  const onSubmit = () => {
    if (verifyForm()) {
      setIsOpened(true);
      const info = {
        originOrganizationId: organizationId,
        birthday,
        changeReason,
        targetOrganizationId: orgRange[targetOrg].organizationId,
        userName: name,
        userNation,
        userNumber: studentJobNumber,
        userSex: sex === 0 ? "男" : "女"
      };
      submitApplication(info).then(res => {
        if (res.code === 200) {
          setSubmitOkVis(true);
        }
        else if (res.code === 500) {
          Taro.atMessage({
            'message': '当前账号已有申请正在审批中, 请耐心等待审批完成',
            'type': 'warning',
            'duration': 2000
          });
        }
      }).finally(() => { setIsOpened(false); });
    }
  };

  return (
    <View className={css.home}>
      <Header message='转组织申请' left='140px' />
      <Return />

      <AtForm className={css.atform} onSubmit={onSubmit}>
        <AtMessage />
        <View className={css.inputbox}>
          <AtInput
            title='姓名'
            className={css.input}
            name='userName'
            placeholder='请输入申请人姓名'
            value={name}
            disabled
          />
        </View>
        <View className={css.inputbox}>
          <AtInput
            title='性别'
            className={css.input}
            name='userName'
            placeholder='请输入申请人姓名'
            value={sex === 0 ? "男" : "女"}
            disabled
          />
        </View>
        <View className={css.inputbox}>
          <View className={css.selector}>
            <Text className={css.lable}>出生日期</Text>
            <Picker
              mode='date'
              start='1950-01-01'
              end='2010-01-01'
              value={birthday}
              onChange={birthdayChange}
            >
              <View className={css.text}>{birthday}</View>
            </Picker>
          </View>
        </View>
        <View className={css.inputbox}>
          <AtInput
            title='民族'
            className={css.input}
            name='userNation'
            placeholder='请输入民族'
            value={userNation}
            onChange={(e) => { setUserNation(e); }}
          />
        </View>

        <View className={css.inputbox}>
          <AtInput
            title='工号/学号'
            className={css.input}
            name='userNumber'
            placeholder='请输入工号/学号'
            value={studentJobNumber}
            disabled
          />
        </View>

        <View className={css.inputbox}>
          <AtInput
            title='原党支部'
            className={css.input}
            name='orginOrganizationId'
            value={organizationName}
            disabled
          />
        </View>

        <View className={css.inputbox}>
          <View className={css.selector}>
            <Text className={css.lable}>移交党支部</Text>
            <Picker
              mode='selector'
              range={orgRange}
              rangeKey='organizationName'
              onChange={e => { setTargetOrg(e.detail.value); }}
            >
              <View className={css.text}>{orgRange[targetOrg].organizationName}</View>
            </Picker>
          </View>
        </View>
        <View className={css.inputbox}>
          <AtInput
            title='转移原因'
            className={css.input}
            name='changeReason'
            placeholder='请输入转移原因'
            value={changeReason}
            onChange={(e) => { setChangeReason(e); }}
          />
        </View>
        <View className={css.buttonBox}>
          <Button className={css.submitBtn} formType='submit'>提交</Button>
        </View>
      </AtForm>

      <SubmitOkModal
        visible={submitOkVis}
        setVisible={setSubmitOkVis}
        url='../../index'
        text='申请'
      />

      <AtToast isOpened={isOpened} text='上传数据中...' status='loading' duration={0} hasMask />
    </View>
  );
}